/*
 * Script to manage display and dynamic content
 * on the index.html page
 * 
 * Author: Chris Casola
 */

var numChoices = 3;

var toolTips = {
	'eventType' : 'A closed event has a specified number of participants and is not available for the public to join. An open event has a flexible number of participants and allows anyone to join.',
	'peopleTip' : 'You must specify the number of people participating in a closed event.',
	'openRoundsTip' : 'This is the number of times each participant will have a chance to add an Edge.',
	'closedRoundsTip' : 'This is the number of times each participant will have a chance to add an Edge.',
	'maxChoicesTip' : 'This is the maximum number of choices that can be provided by participants in an open event.',
};

window.onload = function () {
	// style the page
	applyStyles();
	
	// add event listeners
	document.getElementById('btnClosed').addEventListener("click", btnClosedController, false);
	document.getElementById('btnOpen').addEventListener("click", btnOpenController, false);
	document.getElementById('addChoice').addEventListener("click", addChoiceController, false);
	document.getElementById('removeChoice').addEventListener("click", removeChoiceController, false);
	addToolTipListeners();
}

/*
 * Add another text field to the choice list
 */
function addChoiceController(event) {
	var choiceList = document.getElementById('choices');
	var newChoice = document.createElement('li');
	numChoices++;
	newChoice.innerHTML = "<input type='text' id='choice" + numChoices + "' name='choice3' size='15' />";
	choiceList.appendChild(newChoice);
}

/*
 * Remove the last choice field from the choice list
 */
function removeChoiceController(event) {
	var choiceList = document.getElementById('choices');
	choiceList.removeChild(choiceList.lastChild);
	while (choiceList.lastChild.nodeType != 1) {
		choiceList.removeChild(choiceList.lastChild);
	}
}

/*
 * Controller that handles click events on the Closed button
 */
function btnClosedController(event) {
	document.getElementById('btnClosed').style.backgroundColor = '#8C8FC3';
	document.getElementById('btnOpen').style.backgroundColor = '#3f4278';
	changeForm('closed'); // display the closed event form
}

/*
 * Controller that handles click events on the Open button
 */
function btnOpenController(event) {
	document.getElementById('btnClosed').style.backgroundColor = '#3f4278';
	document.getElementById('btnOpen').style.backgroundColor = '#8C8FC3';
	changeForm('open'); // display the open event form
}

function changeForm(form) {
	document.getElementById('createEvent').style.display = 'inline';
	if (form == 'open') {
		document.getElementById('closedInputForm').style.display = 'none';
		document.getElementById('openInputForm').style.display = 'block';
	}
	else {
		document.getElementById('closedInputForm').style.display = 'block';
		document.getElementById('openInputForm').style.display = 'none';
	}
}

function applyStyles() {
	/* Change cursor when hovering over buttons */
	var buttons = document.getElementsByClassName('button');
	for (var i=0; i < buttons.length; i++) {
		buttons[i].style.cursor = "pointer";
	}
	
	/* Hide the create open event form and create event button */
	document.getElementById('openInputForm').style.display = 'none';
	document.getElementById('closedInputForm').style.display = 'none';
	document.getElementById('createEvent').style.display = 'none';
}
